<!-- 邀请好友绑定 -->
<template>
  <div class="page">
      <div class="top-wrapper">
          <div class="normal-user">
              <img src="~assets/images/node/router.png" class="center-block" alt="" />
              <h2>路由器挖矿共质押</h2>
              <h3><span>{{router.pledgeCvnt}}</span>CVNT</h3>
          </div>
          <div class="pledge-wrapper">
              <div class="pledge-info">
                  <div>
                      <p>每个节点质押数量</p>
                      <h3><span>{{router.averagePledgeCvnt}}</span>cvnt</h3>
                  </div>
                  <div>
                      <p>绑定的节点数量</p>
                      <h3><span>{{router.count}}</span></h3>
                  </div>
                  <div>
                      <p>开启挖矿的节点</p>
                      <h3><span>{{router.miningCount}}</span></h3>
                  </div>
              </div>
              <div class="pledge-text">
                  <p style="color:#26C46D;" v-show="router.averagePledgeCvnt >= 3000">每个节点需要至少质押3000CVNT<br/>现已达到路由器挖矿质押需求</p>
                  <p style="color:#FD5454;" v-show="router.averagePledgeCvnt < 3000">每个节点需要至少质押3000CVNT<br/>未达到路由器挖矿质押数量，<br/>请减少开启挖矿的节点或增加质押的CVNT，<br/>否则挖矿将不予结算！</p>
              </div>
          </div>
      </div>
      <div @touchmove.prevent class="bottom-wrapper">
          <p @click="openDeposit">增加质押</p><p @click="openWithdraw">提取质押</p>
      </div>
      <div class="mask" v-show="showMask" @click="closeMask($event)">
          <div ref="maskContent">
              <transition name="fade">
                  <div class="general-height node-detail">
                      <h3 class="title">{{current == 1 ? '增加质押' : '提取质押'}}</h3>
                      <h4 class="desc">{{current == 1 ? '质押数量' : '提取数量'}}</h4>
                      <div class="content" v-show="current == 1">
                          <input placeholder="输入质押CVNT的数量" v-model="depositNumber" type="number" @focus="getRouterMode" />
                          <span @click="availableCvntAllIn">全部</span>
                      </div>
                      <div class="content" v-show="current == 2">
                          <input placeholder="输入提取CVNT的数量" v-model="withdrawNumber" type="number" @focus="getRouterMode" />
                          <span @click="pledgingCvntAllOut">全部</span>
                      </div>
                      <h5 class="assets" v-show="current == 1"><strong>钱包可用资产</strong><span>{{availableCvnt}}CVNT</span></h5>
                      <h5 class="assets" v-show="current == 2"><strong>质押总额</strong><span>{{router.pledgeCvnt}}CVNT</span></h5>
                      <div class="result-text" :class="{'success':routerPledge.type == 1, 'failure': routerPledge.type == 0 }" v-show="current == 1">
                          <p>单台路由器质押数量为 {{routerPledge.average}} CVNT<br/>{{routerPledge.type == 0 ? '不满足挖矿需求，挖矿不予结算' : '满足挖矿需求'}}</p>
                      </div>
                      <div class="result-text" :class="{'success':routerDraw.type == 1, 'failure': routerDraw.type == 0 }" v-show="current == 2">
                          <p>单台路由器质押数量为 {{routerDraw.average}} CVNT<br/>{{routerDraw.type == 0 ? '不满足挖矿需求，挖矿不予结算' : '满足挖矿需求'}}</p>
                      </div>
                      <h6 class="notice"><span>*</span>提取质押CVNT时需24小时后到可用余额</h6>
                      <div class="confirm-btn" v-show="showBtn && current == 1">
                          <p @click.stop.prevent="confirmDeposit">确定</p>
                      </div>
                      <div class="confirm-btn" v-show="showBtn && current == 2">
                          <p @click.stop.prevent="confirmWithdraw">确定</p>
                      </div>
                  </div>
              </transition>
          </div>
      </div>
  </div>


</template>

<script>
  import {incomeType, cvntPledge, cvntWithdraw, depositUserInfo } from 'api/register'

  export default {
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        // console.log(to.query);
        vm.showMask = false;
        vm.getDepositUserInfo();
        /*vm.availableCvnt = to.query.availableCvnt;
        vm.router.count = to.query.count;
        vm.router.miningCount = to.query.miningCount;
        vm.router.pledgeCvnt = to.query.pledgeCvnt;
        if (vm.router.miningCount == 0 || vm.router.miningCount == '0') {
          vm.router.averagePledgeCvnt = 0;
          vm.routerPledge.type = 0;
        } else {
          vm.router.averagePledgeCvnt = (Number(vm.router.pledgeCvnt) / Number(vm.router.miningCount)).toFixed(0);
          if (vm.router.averagePledgeCvnt >= 3000) {
            vm.router.type = 1;
          } else {
            vm.router.type = 0;
          }
        }*/
      })
    },
    data () {
      return {
        uid: '',
        token: '',
        current: 2,
        depositNumber: '',
        withdrawNumber: '',
        showMask: false,
        showBtn: true,
        availableCvnt: '--',
        router: {
          pledgeCvnt: '--',
          count: '--',
          miningCount: '--',
          averagePledgeCvnt: '--',
          type: 0
        },
        routerPledge: {
          average: 0,
          type: 0
        },
        routerDraw: {
          average: 0,
          type: 0
        },
        status: 1,
        source: 1
      }
    },
    created () {

    },
    mounted() {
      const H = window.innerHeight;
      window.addEventListener('resize', () => {
        if (window.innerHeight < H) {
          this.showBtn = false;
        } else {
          this.showBtn = true;
        }
      })
    },
    watch: {
      depositNumber() {
        this.getRouterMode();
      },
      withdrawNumber() {
        this.getRouterMode();
      }
    },
    methods: {
      getDepositUserInfo() {
        depositUserInfo().then((data) => {
          if (data.status && data.status == 1) {
            this.availableCvnt = data.data.availableCvnt;
            this.router = data.data.router;
            if (this.router.miningCount == 0 || this.router.miningCount == '0') {
              this.router.averagePledgeCvnt = 0;
              /*this.routerPledge.type = 0;*/
              this.router.type = 0;
            } else {
              /*this.router.averagePledgeCvnt = (Number(this.router.pledgeCvnt) / Number(this.router.miningCount)).toFixed(0);*/
              this.router.averagePledgeCvnt = Math.floor(Number(this.router.pledgeCvnt) / Number(this.router.miningCount));

              if (this.router.averagePledgeCvnt >= 3000) {
                this.router.type = 1;
              } else {
                this.router.type = 0;
              }
            }

            // this.linux = data.data.linux;
          }
        })
      },
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.depositNumber = '';
          this.withdrawNumber = '';
        }
      },
      openDeposit() {
        this.current = 1;
        this.status = 1;
        this.routerPledge.average = this.router.averagePledgeCvnt;
        this.routerPledge.type = this.router.type;
        this.showMask = true;
      },
      openWithdraw() {
        this.current = 2;
        this.status = 2;
        this.routerDraw.average = this.router.averagePledgeCvnt;
        this.routerDraw.type = this.router.type;
        this.showMask = true;
      },
      confirmDeposit() {
        if (this.depositNumber == '' || this.depositNumber <= 0 || this.depositNumber > Number(this.availableCvnt) || !this.isRealNum(this.depositNumber)) {
          this.showToast('请输入正确的质押金额！', 'warn');
          return;
        }
        if (this.isPledging) {
          return;
        }
        this.isPledging = true;
        cvntPledge(this.depositNumber, this.source).then((data) => {

          if (data.status && data.status == 1) {
            this.isPledging = false;
            this.depositNumber = '';
            this.showMask = false;
            this.getDepositUserInfo();
            this.showToast('质押成功！', 'correct');
          }
        }).catch((err) => {
          this.showToast('质押失败，请稍后再试...', 'warn');
          this.isPledging = false;
        })
      },
      confirmWithdraw() {
        if (this.withdrawNumber == '' || this.withdrawNumber <= 0 || this.withdrawNumber > this.router.pledgeCvnt || !this.isRealNum(this.withdrawNumber)) {

          this.showToast('请输入正确的提取金额！', 'warn');
          return;
        }/*postData*/
        if (this.isDrawing) {
          return;
        }
        this.isDrawing = true;
        cvntWithdraw(this.withdrawNumber, this.source).then((data) => {
          if (data.status && data.status == 1) {
          this.isDrawing = false;
          this.withdrawNumber = '';
          this.showMask = false;
          this.getDepositUserInfo();
          this.showToast(data.info, 'correct');
          }
        }).catch((err) => {
          this.showToast('提取失败，请稍后再试...', 'warn');
          this.isPledging = false;
        })

      },

      availableCvntAllIn() {
        this.depositNumber = this.availableCvnt;
        this.getModeSettlement();
      },
      pledgingCvntAllOut() {
        this.withdrawNumber = this.router.pledgeCvnt;
        this.getModeSettlement();
      },
      getRouterMode() {
        setTimeout(() => {
          this.getModeSettlement();
        }, 500)
      },
      getModeSettlement() {
        let cvnt;
        if (this.current == 1) {
          cvnt = this.depositNumber;
        } else if (this.current == 2) {
          cvnt = this.withdrawNumber;
        }
        if (cvnt == 0 || cvnt == '') {
          this.routerPledge.average = this.router.averagePledgeCvnt;
          this.routerPledge.type = this.router.type;
          this.routerDraw.average = this.router.averagePledgeCvnt;
          this.routerDraw.type = this.router.type;
          return;
        }
        if (this.current == 1) {
          if (cvnt <= 0 || cvnt > Number(this.availableCvnt) || !this.isRealNum(cvnt)) {
            return;
          }
        } else {
          if (cvnt <= 0 || cvnt > Number(this.router.pledgeCvnt) || !this.isRealNum(cvnt)) {
            return;
          }
        }

        /*if (cvnt <= 0 || cvnt > Number(this.availableCvnt) || !this.isRealNum(cvnt)) {
          return;
        }*/
        incomeType(cvnt, this.status, this.source).then((data) => {
          // console.log(data)
          if (data.status && data.status == 1) {
            if (this.current == 1) {
              this.routerPledge = data.data;
            } else if (this.current == 2) {
              this.routerDraw = data.data;
            }
          }
        })
      },
      isRealNum(val) {
        // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
        if (val === '' || val == null) {
          return false;
        }
        let reg = /^([1-9][0-9]*)+(.[0-9]{1,8})?$/;
        if (reg.test(val)) {
          return true;
        } else {
          return false;
        }
        /*if (!isNaN(val)) {
          return true;
        } else {
          return false;
        }*/
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2500,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    background: #F5F5FB;
  }
  .page {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .top-wrapper{
    height:calc(100% - 132px);
    overflow-y:auto;
  }
  .normal-user{
    height:440px;
    padding-top:22px;
    background: url("~assets/images/node/routerbanner.png") no-repeat center center;
    background-size: contain;
    >img{
      width:174px;
      height:174px;
      margin-bottom:29px;
    }
    h2{
      text-align:center;
      font-size:30px;
      font-weight:500;
      color:#fff;
      text-shadow:0 2px 4px rgba(0,89,240,0.5);
    }
    h3{
      margin-top:20px;
      text-align:center;
      font-size:24px;
      color:#fff;
      span{
        font-size:60px;
      }
    }

  }

  .pledge-wrapper{
    margin:-74px 30px 0;
    border:1px solid rgba(228,228,228,1);
    border-radius:10px;
    .pledge-info{
      display:flex;
      justify-content:space-between;
      padding:32px 28px;
      text-align:center;
      background:#fff;
      >div{
        flex:1;
        p{
          margin-bottom:28px;
          font-size:22px;
          color:#71768C;
        }
        h3{
          color:#1D2858;
          font-size:20px;
          span{
            font-size:40px;
            font-weight:600;
          }
        }
      }
    }
    .pledge-text{
      /*height:202px;*/
      padding:30px 0;
      border-top:1px solid rgba(228,228,228,1);
      font-size:26px;
      color:#26C46D;
      text-align:center;
      p{
        /*margin-top:62px;*/
        line-height:1.5;
      }
    }
  }


  .bottom-wrapper{
    display:flex;
    height:132px;
    margin:0 30px;
    p{
      flex:1;
      height:84px;
      line-height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      margin-right:30px;
      text-align:center;
      font-size:32px;
      color:#fff;
      cursor:pointer;
    }
    p:last-child{
      margin-right:0;
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.6);

    .general-height{
      /*height: 500px;*/
      height: 67.4662vh;
      padding:30px;
      background:rgba(255,255,255,1);
    }
    .node-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .title{
        margin-bottom:57px;
        font-size:34px;
        text-align:center;
        color:#202C5B;
      }
      .desc{
        margin-bottom:27px;
        color:#1D2858;
        font-size:30px;
      }
      .content{
        position:relative;
        margin-bottom:28px;
        input{
          width:100%;
          display:inline-block;
          height:84px;
          line-height:84px;
          text-indent:22px;
          font-size:30px;
          border-radius:8px;
          border:1px solid rgba(227,227,227,1);
          box-shadow:0 0 0 rgba(0,0,0,0);
          -webkit-appearance:none;
          outline:none;
          background:#E3E3E3;
        }
        span{
          position:absolute;
          display:inline-block;
          padding:6px 12px;
          top:24px;
          right:24px;
          font-size:26px;
          color:#1253FC;
        }
      }
      .assets{
        display:flex;
        justify-content:space-between;
        margin-bottom:27px;
        strong{
          font-size:26px;
          color:#71768C;
        }
        span{
          font-size:26px;
          color:#202C5B;
        }
      }
      .result-text{
        padding:22px 0 17px;
        text-align:center;
        border-radius:10px;
        color:#fff;
        font-size:30px;
        line-height:1.65;
        background:linear-gradient(-90deg,rgba(253,47,86,1),rgba(255,120,112,1));
      }
      .success{
        background:linear-gradient(-90deg,rgba(21,201,198,1),rgba(29,224,119,1));
      }
      .failure{
        background:linear-gradient(-90deg,rgba(253,47,86,1),rgba(255,120,112,1));
      }
      .notice{
        margin-top:15px;
        text-align:center;
        font-size:28px;
        color:#71768C;
        span{
          color:#FE445E;
        }
      }
      .confirm-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        font-size:34px;
        cursor:pointer;
      }
    }
  }



  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }


  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }



  .center-block{
    display:block;
    margin:0 auto;
  }
  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }








</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>
